<template>
  <div class="button-container" :class="{ 'is-selected': isSelect }">
    {{ text }}
  </div>
</template>

<script setup lang="ts">
import { ButtonProps } from "./types";

defineOptions({
  name: "Button",
});

defineProps<ButtonProps>();
</script>

<style scoped lang="scss">
.button-container {
  background-image: url("./img/btn-unselect-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $primary-color;
  height: 43px;
  width: 88px;
  cursor: pointer;
  &.is-selected {
    background-image: url("./img/btn-select-bg.png");
    color: $text-primary;
  }
}
</style>
